import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { Button, Modal } from 'antd-mobile'
import ProjectDetailVM from 'cvm/projectDetail/projectDetail'
import './projectDetail.less'

const alert = Modal.alert
const ProjectDetailList = observer(({ vm }) => {
  const item = vm.projectDetail
  return (
    <div>
      {
        item.Id &&
        <div style={{ overflow: 'hidden' }} className='detail-container'>
          <div className='company-box'>
            <div className='company bottom-line'>
              <span className='left'>{item.CompanyName}</span>
              {vm.projectState === '1' ? <span className='current-state'>(待确认)</span> : null}
              {vm.projectState === '2' ? <span className='current-state'>
                (洽谈中)<b className='edit-img' onClick={() => { vm.handleEditProject() }}><img src={require('../../images/edit.png')} /></b>
              </span> : null}
              {vm.projectState === '3' ? <span className='current-state'>(已拒绝)</span> : null}
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-1'>联系人</div>
              <div className='flex-4'>{item.LinkName}</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-1'>手机号</div>
              <div className='flex-4'>{item.LinkPhone}</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-1'>所在地区</div>
              <div className='flex-4'>{item.Province}，{item.City}</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-1'>详细地址</div>
              <div className='flex-4'>{item.Address}</div>
            </div>
          </div>
          <div className='achievement flex-wrap'>
            <div className='flex-1 left'>项目业绩</div>
            {
              vm.projectState === '0' ? <div className='flex-1 right' onClick={() => { vm.handleToAchievement(item.Id) }}>查看业绩流水</div>
                : null
            }
          </div>
          <div className='commission'>
            <div className='flex-wrap box bottom-line'>
              <div className='flex-1 title'>项目佣金合计</div>
              <div className='flex-1 money'>￥{item.BonsReward.toFixed(2)}</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-3'>服务时长</div>
              <div className='flex-2'>{item.Service}天</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-3'>时长总额</div>
              <div className='flex-2 black'>￥{item.ServiceTotal.toFixed(2)}</div>
            </div>
            {
              vm.projectState !== '0' &&
              <div className='company-detail flex-wrap bottom-line'>
                <div className='flex-3'>时长销售提成
                <span>({item.ServiceRewardScale}%)</span>
                </div>
                <div className='flex-2 red'>￥{item.ServiceReward.toFixed(2)}</div>
              </div>
            }
            {
              vm.projectState === '0' &&
              <div className='company-detail flex-wrap bottom-line'>
                <div className='flex-3'>时长销售佣金
                </div>
                <div className='flex-2 red'>￥{item.ServiceReward.toFixed(2)}</div>
              </div>
            }
            {
              vm.projectState !== '0' &&
              <div className='company-detail flex-wrap  bottom-line'>
                <div className='flex-3'>时长服务提成
                <span>({item.ServiceRemainScale}%)</span>
                </div>
                <div className='flex-2 red'>￥{item.ServiceRemain.toFixed(2)}</div>
              </div>
            }
            {
              vm.projectState === '0' &&
              <div className='company-detail flex-wrap'>
                <div className='flex-3'>时长服务佣金
                {
                    vm.projectState !== '0' ? <span>({item.ServiceRemainScale}%)</span>
                      : null
                  }
                </div>
                <div className='flex-2 red'>￥{item.ServiceRemain.toFixed(2)}</div>
              </div>
            }
            {
              vm.projectState === '0' &&
              <div className='company-detail flex-wrap bottom-line'>
                <div className='flex-3'>已结算服务提成(按月结算)</div>
                <div className='flex-2'>￥{item.ServicePay.toFixed(2)}</div>
              </div>
            }
            <div className='company-detail flex-wrap'>
              <div className='flex-3'>硬件总额</div>
              <div className='flex-2 black'>￥{item.DeviceTotal.toFixed(2)}</div>
            </div>
            {
              vm.projectState !== '0' &&
              <div className='company-detail flex-wrap'>
                <div className='flex-3'>硬件销售提成
                {
                  vm.projectState !== '0' ? <span>({item.DeviceRewardScale}%)</span>
                    : null
                }
                </div>
                <div className='flex-2 red'>￥{item.DeviceReward.toFixed(2)}</div>
              </div>
            }
            {
              vm.projectState === '0' &&
              <div className='company-detail flex-wrap'>
                <div className='flex-3'>硬件销售佣金
                </div>
                <div className='flex-2 red'>￥{item.DeviceReward.toFixed(2)}</div>
              </div>
            }
            <div className='company-detail flex-wrap'>
              <div className='flex-3'>摄像机数量</div>
              <div className='flex-2'>{item.Video}个</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-3'>摄像机金额</div>
              <div className='flex-2'>￥{item.VideoTotal.toFixed(2)}</div>
            </div>
            <div className='company-detail flex-wrap'>
              <div className='flex-3'>内存卡数量</div>
              <div className='flex-2'>{item.Memory}张</div>
            </div>
            <div className='company-detail flex-wrap bottom-line'>
              <div className='flex-3'>内存卡金额</div>
              <div className='flex-2'>￥{item.MemoryTotal.toFixed(2)}</div>
            </div>
            <div className='company-detail flex-wrap summation'>
              <div className='flex-3'>项目业绩合计</div>
              <div className='flex-2 total'>￥{item.BonsTotal.toFixed(2)}</div>
            </div>
          </div>
          {
            vm.projectState === '2' &&
            <div className='btn-box'>
              <Button type='primary' onClick={() => vm.handleSubmitProject()}>提交项目</Button>
              <Button type='warning'
                onClick={() =>
                  alert('确认删除项目', '删除后将不再显示此项目！', [
                    { text: '取消', onPress: () => console.log('cancel') },
                    { text: '确定', onPress: () => vm.handleDeleteProject() }
                  ])
                }
              >删除项目</Button>
            </div>
          }
          {
            vm.projectState === '3' &&
            <div className='btn-box'>
              <Button type='warning'
                onClick={() =>
                  alert('确认删除项目', '删除后将不再显示此项目！', [
                    { text: '取消', onPress: () => console.log('cancel') },
                    { text: '确定', onPress: () => vm.handleDeleteProject() }
                  ])
                }
              >删除项目</Button>
            </div>
          }
        </div>
      }
    </div>
  )
})

@observer
class projectDetail extends Component {
  constructor (props) {
    super(props)
    window.document.title = '项目详情'
    this.vm = new ProjectDetailVM(props)
  }
  render () {
    return (
      <div>
        <ProjectDetailList vm={this.vm} />
      </div>
    )
  }
}

export default projectDetail
